<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport"
          content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="keywords" content=""/>
<meta name="description" content="">
<meta name="author" content=""/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="/assets/css/public.css">
<link rel="stylesheet" type="text/css" href="/assets/css/hjk.css">
<script type="text/javascript" src="/assets/js/jquery-djs.js"></script>
<script type="text/javascript" src="/assets/js/jquery_002.js"></script>
<script type="text/javascript" src="/assets/js/jquery.js"></script>
<title>首页</title>
</head>
<body>
<header class="k_header_0 clearfix ">
  <div class="k_logo"><img src="/assets/images/nav_Logo.png"> </div>
  <div class="k_yjsyxh"><img src="/assets/images/nav_yjsyxh.png"></div>
</header>
<article class="k_article_0"> 
  <!--效果html开始-->
  <div class="main_visual">
    <div class="flicking_con"> <a class="" href="#">1</a> <a class="on" href="#">2</a> <a class="" href="#">3</a> <a class="" href="#">4</a> <a class="" href="#">5</a> </div>
    <div style="" class="main_image">
      <ul style="width: 100%; overflow: visible;">
        <li style="float: none; display: block; position: absolute; top: 0px; left: -1366px; width: 1366px;"><span class="img_3"></span></li>
        <li style="float: none; display: block; position: absolute; top: 0px; left: 0px; width: 1366px;"><span class="img_4"></span></li>
        <li style="float: none; display: block; position: absolute; top: 0px; left: -5464px; width: 1366px;"><span class="img_1"></span></li>
        <li style="float: none; display: block; position: absolute; top: 0px; left: -4098px; width: 1366px;"><span class="img_2"></span></li>
        <li style="float: none; display: block; position: absolute; top: 0px; left: -2732px; width: 1366px;"><span class="img_5"></span></li>
      </ul>
      <a style="width: 100%; overflow: visible; display: inline;" href="javascript:;" id="btn_prev"></a> <a style="width: 100%; overflow: visible; display: inline;" href="javascript:;" id="btn_next"></a> </div>
  </div>
  <!--效果html结束-->
  <div class="k_menu_00">
    <ul class="clearfix ">
      <a href="/otherarticle">
      <li><img src="/assets/images/icon_shengya@2x.png">
        <p class="k_menu_00_p1">生涯驿站</p>
      </li>
      </a> <a href="/specialist">
      <li><img src="/assets/images/icon_zhuanjia@2x.png">
        <p class="k_menu_00_p2">专家团队</p>
      </li>
      </a> <a href="/forum">
      <li><img src="/assets/images/icon_xingdong@2x.png">
        <p class="k_menu_00_p3">生涯论坛</p>
      </li>
      </a> <a href="/ceping">
      <li><img src="/assets/images/icon_ceping@2x.png">
        <p class="k_menu_00_p4">测评工具</p>
      </li>
      </a>
    </ul>
  </div>
  <div class="k_rdtj">
    <div class="k_rdtj_text"><b>热点推荐</b><a href="/article/list" style="float: right;margin-right: 10px;">更多文章</a></div>
    <c:forEach var="a" items="${articleList }">
    	<a href="/article/detail/${a.id }"><div class="k_rdtj_img"><img src="${a.imagePath }"></div></a>
    </c:forEach> 

  </div>
</article>
<footer class="k_footer0">
  <ul>
    <a href="javascript:;">
    <li class="k_focus"><img src="/assets/images/tab_home@2x.png">
      <p>首页</p>
    </li>
    </a> 
    
    <a href="/learn">
    <li><img src="/assets/images/tab_school_gary@2x.png">
      <p>学习中心</p>
    </li>
    </a> 
    
    <a href="/user/login">
    <li><img src="/assets/images/tab_user_gary@2x.png">
      <p>个人中心</p>
    </li>
    </a>
    
    <a href="/aboutauthor/aboutAuthor">
    <li><img src="/assets/images/tab_about-us_gary@2x.png">
      <p>关于我们</p>
    </li>
    </a>
  </ul>
</footer>
<!--图片滚动部分--> 
<script type="text/javascript">
    $(document).ready(function(){

        $(".main_visual").hover(function(){
            $("#btn_prev,#btn_next").fadeIn()
        },function(){
            $("#btn_prev,#btn_next").fadeOut()
        });

        $dragBln = false;

        $(".main_image").touchSlider({
            flexible : true,
            speed : 200,
            btn_prev : $("#btn_prev"),
            btn_next : $("#btn_next"),
            paging : $(".flicking_con a"),
            counter : function (e){
                $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
            }
        });

        $(".main_image").bind("mousedown", function() {
            $dragBln = false;
        });

        $(".main_image").bind("dragstart", function() {
            $dragBln = true;
        });

        $(".main_image a").click(function(){
            if($dragBln) {
                return false;
            }
        });

        timer = setInterval(function(){
            $("#btn_next").click();
        }, 5000);

        $(".main_visual").hover(function(){
            clearInterval(timer);
        },function(){
            timer = setInterval(function(){
                $("#btn_next").click();
            },5000);
        });

        $(".main_image").bind("touchstart",function(){
            clearInterval(timer);
        }).bind("touchend", function(){
            timer = setInterval(function(){
                $("#btn_next").click();
            }, 5000);
        });

    });
</script>
</body>
</html>